<template>
<div id="body" class="wrap">
  <div id="header" class="header">
    <swiper :list="demoList" auto style="width:100%;margin:0 auto;autoHeight：true;" dots-class="custom-bottom" dots-position="center"></swiper>
  </div>
<div  class="content">
  <scroller lock-y :scrollbar-x=false>
      <div class="box1" :style="styleObject">
        <div class="box1-item" v-for="key of movies" :key="key.id">
          <a v-bind:href='key.post_mp4'>
     <!--<router-link :to="{'name': 'video',params: { vid: key.post_mp4}}">-->
        <img class="img1"  v-bind:src='key.thumb' width="100%" ref="imgref">
     <!--</router-link>-->
          </a>
        </div>
      </div>
    </scroller>
      <div class="title">
        <span class="text">热门主播</span>
      </div>
    </div>
    <div  class="content">
      <div v-for='key of info' :key="key.id">
        <a v-bind:href='key.channel_source_m3u8' class="box">
          <!--<router-link :to="{'name': 'video',params: { vid: key.channel_source_m3u8}}" class="box" >-->
          <div class="boxpic">
            <div class="zoomImage" v-bind:style='key.dd'></div>

            <!--<img class="img" v-bind:src='key.avatar' width="100%">-->
          </div>
          <span class="left">{{key.user_nicename}}</span>
          <span class="right">{{key.online_num}}在线</span>
          <!--</router-link>-->
        </a>
      </div>
    </div>
</div>
</template>

<script>
import { Swiper, Scroller } from 'vux'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      info: [],
      banner: [],
      demoList: [],
      imgList: [],
      movies: [],
      styleObject: {
        width: '20480px'
      },
      showList1: true,
      scrollTop: 0,
      onFetching: false,
      bottomCount: 20
    }
  },
  components: {
    Swiper,
    Scroller
  },
  methods: {
    list () {
      this.$http.jsonp('http://klcmchina.com/Api/SiSi/getLive').then(function (response) {
        let r = response.data
        if (r.code === 200) {
          this.info = r.info
          for (var video in this.info) {
            this.info[video].channel_source_m3u8 = this.info[video].channel_source_m3u8
            this.info[video].dd = 'background-image:url(' + this.info[video].avatar + ')'
          }
        }
      }, function (response) {
      })

      this.$http.jsonp('http://klcmchina.com/api/movie/index?cid=12').then(function (response) {
        let r = response.body
        var scrollbarwidth = 0
        if (r.code === 200) {
          this.movies = r.data.movies
          scrollbarwidth = this.movies.size * 105
          // for (var movie in this.movies) {
          //   scrollbarwidth += 105
          // }
          this.styleObject.width = scrollbarwidth + 'px'
        }
      }, function (response) {
      })

      this.$http.jsonp('http://klcmchina.com/Api/SiSi/getBanner').then(function (response) {
        let r = response.data
        var key
        if (r.code === 200) {
          for (key in r.data) {
            this.imgList.push(r.data[key]['pic'])
          }
          this.demoList = this.imgList.map((one, index) => ({
            url: 'javascript:',
            img: one
          }))
        }
      }, function (response) {
      })
    },
    onScrollBottom () {
      if (this.onFetching) {
        // do nothing
      } else {
        this.onFetching = true
        setTimeout(() => {
          this.bottomCount += 10
          this.$nextTick(() => {
            this.$refs.scrollerBottom.reset()
          })
          this.onFetching = false
        }, 2000)
      }
    },
    onScroll (pos) {
      this.scrollTop = pos.top
    },
    onCellClick () {
      window.alert('cell click')
    },
    onClickButton () {
      window.alert('click')
    },
    changeList () {
      this.showList1 = false
      this.$nextTick(() => {
        this.$refs.scroller.reset({
          top: 0
        })
      })
    }
  },
  mounted () {
    this.list()
  }
}
</script>

<style  scoped>
  .swiper-slide{
        overflow: hidden;
    }

 .swiper-slide-active{
        overflow: auto !important;
    }
  .vux-img{
    width:100%;
    height:0;
    padding-bottom: 100%;
    overflow:hidden;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    background-size:cover;
  }
.zoomImage{
    width:100%;
    height:0;
    padding-bottom: 100%;
    overflow:hidden;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    background-size:cover;
}
.img1 {
  width: 100px;
  height: 100px;
  object-fit: cover;
  position:static;
  +position:relative;
  top:-50%;left:-50%;
  vertical-align:middle
}
.box1 {
  height: 100px;
  position: relative;
}
.box1-item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  display:inline-block;
  margin-left: 5px;
  float: left;
  text-align: center;
  line-height: 100px;
}
.box1-item:first-child {
  margin-left: 0;
}
.box2-wrap {
  height: 300px;
  overflow: hidden;
}
.img{
  /*width:100vw;*/
  /*height:100vw;*/
  height: 200px;
  border-top-left-radius:15px;
  border-top-right-radius:15px;
  border-bottom-right-radius:15px;
  border-bottom-left-radius:15px;
  object-fit: cover;
    position: static;
    top: -50%;
    left: -50%;
    vertical-align: middle;

}
.box {
    float: left;
    width: 47.6%;
     /*height：calc(width);*/
    /*height: 400px;*/
    margin-left: 1.6%;
    margin-top: 10px;
}

.boxpic {
    float: left;
    width: 100%;
    /*height: 380px;*/
    /*background-color: red;*/

    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 25px;
}

.header {
    display: block;
    /*height: 200px;*/
    /*background-color: rgb(57, 207, 196);*/
    margin: 0 auto;
    width: 100%;
    margin-bottom: 10px;
}

.wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    width: 100%;
    display: flex;
    min-height: 100%;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0 auto;
    padding: 0 auto;
    /*background-color: rgb(203, 203, 203);*/
}

.content {
    display: block;
    background-color: white;
    margin: 0 auto;
    width: 100%;
}

.title {
    width: 100%;
    margin-top: 10px;
    margin-left: 1%;
}

.left {
    float: left;
    color: black;
    /*font-size: .32rem;*/
    color: #333;
    overflow: hidden;
    /*height: .72rem;*/
    /*line-height: .72rem;*/
}

.right {
    float: right;
    color: black;
    /*height: .72rem;*/
    /*line-height: .72rem;*/
    margin-right: 10px;
    /*font-size: .32rem;*/
    color: #333;
    overflow: hidden;
}
.text{
    float: left;
}

.text:before {
    content: " ";
    float: left;
    width: .98rem;
    height: .98rem;
    margin: .29333rem .26667rem 0 .13333rem;
    background: rgb(57, 207, 196);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
</style>s
